<template>
    <el-card class="users">
        <div class="top">
            <el-button type="primary" :icon="Plus" @click="handleDialogValue({})">新增影厅</el-button>
        </div>
        <div class="bottom">
            <el-table class="users_table" :data="tableData" border style="width: 100%">
                <el-table-column align="center" :key="index" v-for="(item, index) in options" :prop="item.prop"
                    :label="item.label" :width="item.width">
                    <template v-slot="{ row }" v-if="item.prop == 'roomOpen'">
                        <el-switch v-model="row.roomOpen" @change='changeState(row)' />
                    </template>

                    <template v-slot="{row}" v-else-if="item.prop=='createTime'">
                        {{row.createTime}}
                    </template>

                    <template v-slot="{row}" v-else-if="item.prop=='roomType'">
                        <el-tag type="danger" v-if="row.roomType == 1">小</el-tag>
                        <el-tag type="warning" v-if="row.roomType == 2">中</el-tag>
                        <el-tag type="success" v-if="row.roomType == 3">大</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    <Dialog v-model="dialogVisible" :dialogTableValue="dialogTableValue" @initRoom="getRooms"
        @initWaitList="initWaitList" :dialogTitle="dialogTitle" v-if="dialogVisible"></Dialog>
    <memDialog v-model="memDialogVisible" @pushIntoRecord="pushInToRecord" v-if="memDialogVisible"
        :dialogTableValue="memDialogTableValue" @update="resetSwitch"></memDialog>
    <Mask v-model="isShowMask">
        <el-empty description="这里什么也没有" v-if="waitQueue.length == 0" />
        <el-timeline style="width:100%" v-else>
            <el-timeline-item v-for="(activity, index) in waitQueue" :key="index" placement="top"
                :class="['space-between', activity.done == true ? 'font-grey' : '']" style="width: 100%;"
                :type="activity.done == false ? 'danger' : 'info'" size="large"
                :timestamp="activity.done == false ? '未处理' : '已处理'">
                <el-descriptions direction="vertical" :column="6" size="large" border>
                    <el-descriptions-item align="center" label="影厅名称">{{ activity.roomInfo?.roomName }}
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="影厅排数">{{ activity.roomInfo?.roomCol }}
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="影厅列数">{{ activity.roomInfo?.roomRow }}
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="影厅楼层">{{ activity.roomInfo?.roomFloor }}
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="事项创建人">{{ activity.createPersonName }}
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="事项创建时间">{{ activity.createTime }}</el-descriptions-item>
                    <el-descriptions-item align="center" label="影厅状态">
                        <span class="dot"
                            :style="{ backgroundColor: activity.state == false ? 'red' : 'green' }"></span>
                        <span>{{ activity.state == false ? '仍在使用' : '未在使用' }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item align="center" label="操作类型" v-if="activity.optType != 0">
                        {{ activity.optType == 1 ? '更新' : '删除' }}</el-descriptions-item>
                    <el-descriptions-item align="center" label="事项备注">{{ activity.mem }}</el-descriptions-item>
                </el-descriptions>
                <div class="opt-btns space-around">
                    <el-button circle :disabled="activity.state == false || activity.done == true ? true : false"
                        type="primary" class="opt-item" @click="handleDialogValue(activity.roomInfo as IRoom)">编辑
                    </el-button>
                    <el-button circle :disabled="activity.state == false || activity.done == true ? true : false"
                        type="danger" class="opt-item" @click="handleDelete(activity.roomInfo as IRoom)">删除</el-button>
                </div>
            </el-timeline-item>
        </el-timeline>
    </Mask>
    <div class="wait-to-do">
        <el-badge :value="badgeNum" class="item">
            <el-button class="wait-to-do-item" circle icon="bell" type="primary" @click="openMask"></el-button>
        </el-badge>
    </div>
</template>
   
<script setup lang="ts">
import { Search, Edit, Setting, Delete, Plus } from '@element-plus/icons-vue'
import { ref, reactive, onMounted, computed } from 'vue'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import Dialog from './room-dialog.vue'
import memDialog from './mem-dialog.vue'
import { getAllRoomByCinema, deleteARoom, updateRoomOpenStatusById } from '../../../../../api/room';
import { addARoomRecord, getAllRoomRecordOrderByTime } from '../../../../../api/roomRecord'
import { isNull } from '../../../../../utils/filter'
import Mask from '../../../../../components/mask2.vue'
import { useStore } from 'vuex'

interface IRoom {
    unitId?: number
    roomId: number,
    roomName: string,
    roomRow: number,
    roomCol: number,
    roomType: number,
    roomFloor: number,
    roomContain: number,
    roomOpen: boolean,
}

interface IWait {
    roomInfo: IRoom | undefined,
    createPersonName: string,
    createTime: Date,
    mem: string,
    state: boolean,    // 表示影院是否处于可编辑状态。在未处理的状态下，影院可以关闭
    done: boolean,    // 表示该记录是否被处理过了
    optType: number,
}

const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId
const store = useStore()
const user = JSON.parse(window.sessionStorage.getItem("currentUser")!)
const isShowMask = ref(false)
const options = [
    {
        label: '影厅名称',
        prop: 'roomName'
    },
    {
        label: '容量',
        prop: 'roomContain'
    },
    {
        label: '类型',
        prop: 'roomType'
    },
    {
        label: '排数',
        prop: 'roomRow'
    },
    {
        label: '列数',
        prop: 'roomCol'
    },
    {
        label: '楼层',
        prop: 'roomFloor'
    },
    {
        label: '创建时间',
        prop: 'createTime'
    },
    {
        label: '是否开放',
        prop: 'roomOpen',
        width: '200px'
    }
]

let dialogVisible = ref(false)
let memDialogVisible = ref(false)
let dialogTitle = ref('新增影厅')

let tableData = ref<IRoom[]>([])
let dialogTableValue = ref({})
let memDialogTableValue = ref<IRoom>()
let waitQueue = ref<IWait[]>([])

onMounted(() => {
    getRooms()
})

const badgeNum = computed(() => {
    return waitQueue.value.filter(item => {
        return item.state == true && item.done == false
    }).length
})

const openMask = () => {
    isShowMask.value = true
    getAllRoomRecordOrderByTimeApi()
}

const getAllRoomRecordOrderByTimeApi = async () => {
    getAllRoomRecordOrderByTime({cinemaId:cinemaId}).then((res: any) => {
        if (res.code == 200) {
            waitQueue.value = res.data
            console.log("待办消息列表", res.data);
        } else {
            ElMessage.error("获取待办事项失败")
        }
    })
}

getAllRoomRecordOrderByTimeApi()

const getRooms = () => {
    getAllRoomByCinema({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            tableData.value = res.data.map((item: any) => {
                return {
                    ...item,
                    roomOpen: item.roomOpen == 1 ? true : false
                }
            })
            console.log(res.data)
        } else {
            ElMessage.error("获取影厅列表失败")
        }
    })
}

const resetSwitch = () => {
    memDialogTableValue.value!.roomOpen = true
    memDialogVisible.value = false
}
const pushInToRecord = (mem: string) => {
    debugger
    memDialogVisible.value = false
    addARoomRecord(
        {
            roomId: memDialogTableValue.value!.roomId,
            createPerson: user.userId,
            mem: mem,
            cinemaId:cinemaId
        }
    ).then((res: any) => {
        if (res.code == 200) {
            waitQueue.value.push(
                res.data
            )
        } else {
            ElMessage.error("添加记录失败")
        }
    })
}

const handleDialogValue = (row: IRoom | object) => {
    console.log(row);
    if (isNull(row)) {
        dialogTitle.value = '新增影厅'
        dialogTableValue.value = {}
    } else {
        dialogTitle.value = '编辑影厅'
        dialogTableValue.value = JSON.parse(JSON.stringify(row))
    }
    dialogVisible.value = true
}

const changeState = async (row: IRoom) => {
    debugger
    if (row.roomOpen == false) {
        // 由打开变为关闭的时候, 打开备注表单收集备注信息
        memDialogVisible.value = true
        memDialogTableValue.value = row
    } else {
        row.roomOpen = false
        ElMessage.error("不能手动开启影院")
    }
}

const initWaitList = async (data: IRoom) => {
    debugger
    console.log(data);
    // 发起请求更新影院台方状态
    await updateRoomOpenStatusById({ roomId: data.roomId }).then((res:any) =>{
        if(res.code == 200) {
        }else{
            ElMessage.error("开启影厅失败")
        }
    })
    await getRooms()
    await getAllRoomRecordOrderByTimeApi()

}

const handleDelete = (data: IRoom) => {
    // 发起删除请求
    debugger
    deleteARoom({ roomId: data.roomId }).then((res: any) => {
        if (res.code == 200) {
            const index = tableData.value.findIndex((item: IRoom) => {
                return item.roomId == data.roomId
            })
            tableData.value.splice(index, 1)
            getAllRoomRecordOrderByTimeApi()
        } else {
            ElMessage.error("删除影厅失败")
        }
    })
}

</script>
   
<style lang="scss" scoped>
.wait-to-do-item {
    font-size: 20px;
    height: 50px;
    width: 50px;
}

.wait-to-do {
    position: absolute;
    right: 70px;
    bottom: 40px;
}

.font-grey {
    color: #ccc !important;
    user-select: none;
}

.users {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .top {
            flex-shrink: 0;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;

            .search_box {
                width: 300px;
                margin-right: 15px;
            }
        }

        .bottom {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;

            .users_table {
                flex: 1;
            }

            .el-pagination {
                justify-content: flex-end;
            }
        }
    }

}

.opt-btns {
    flex: 300px 0 1;
}

:deep(.el-empty) {
    width: 80%;
    height: 100%;
    padding: 0;
}

:deep(.el-timeline-item__timestamp) {
    font-size: 16px;
    color: black;
    margin-bottom: 15px;
}

:deep(.el-timeline-item__content),
:deep(.el-timeline-item__wrapper) {
    width: 90%;
}

.opt-item {
    font-size: 20px;
    height: 100px;
    width: 100px;
}

.dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

:deep(.font-grey .el-descriptions) {
    --el-text-color-primary: #ccc !important;
}
</style>
